const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  output: {
    filename: 'scripts/[name].[chunkhash:5].js',
  },
  module: {
    rules: [
      {
        test: /\.(png)|(gif)|(jpg)$/,
        use: [
          {
            // 优化！！！
            // url-loader 内部 使用了 file-loader
            // 如果页面中有很多小文件 就直接 利用 url-loader 进行处理 生成 base64 编码返回
            //  这样 就不需要 生成一个文件 如果太多了就会产生很多 文件  就会导致 请求过多 影响性能 一个域名同时只能请求 6-8 个请求
            loader: 'url-loader',
            options: {
              // limit: false //不限制任何大小，所有经过loader的文件进行base64编码返回
              limit: 10 * 1024, //只要文件不超过 100*1024 字节，则使用base64编码，否则，交给file-loader进行处理
              name: 'imgs/[name].[hash:5].[ext]', // 将 大小超过 limit 的文件，放到 imgs 目录下，并使用 hash 命名
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    open: true,
  },
  stats: {
    modules: false,
    colors: true,
  },
};
